<!DOCTYPE html>
<html>
<%include html-head%>
<body>

	<div data-role="page" id="login">
		<div data-role="main" data-fullscreen="true" align="center" >
			<h1 align="center">please input account and password to login</h1>
			<form class="ui-body ui-body-a ui-corner-all" id="loginForm" style="width: 400px" action="/login">
				<div class="ui-field-contain">
				<input
						type="text" name="userid" id="userid" placeholder="please input account" value=""
						required>
				</div>

				<div class="ui-field-contain"> <input
						type="password" name="pswrd" id="pswrd"
						placeholder="please input password" value="" required>
				</div>

				<input type='submit' data-role="button" data-theme="a" id="submit"
					value="Login"></input>
			</form>
			<p align="center">Welcome to <%= title %></p>
		</div>

		<script type="text/javascript">
            function login(account, password) {

                $('#loginForm').ajaxSubmit({
                    type: 'GET',
                    success: function(result) {
                        console.log(result);
                        if (result === "ok") {
                            window.location.href = '/';
                        } else {
                            showMsgPopup(result);
                        }
                    },
                    error : function(err) {
                        showMsgPopup("login failed:" + err);
                    }
                });
            }

            $("#login").on('pageinit', function() {

                $('#loginForm').off('submit').on('submit', function(e) {
                	var account = $('#userid').val();
                	var password = $('#pswrd').val();
                	
                	if (null === account || "" === account) {
                		showMsgPopup("Please input account");
                        return false;
                	}
                	
                	if (password === null || "" === password) {
                		showMsgPopup("Please input password");
                        return false;
                	}
                	
                    login(account, password);
                    return false;
                });
            });
        </script>
	</div>
</body>
</html>